import { Outlet, history } from "umi";
import {
    LogoutOutlined,
} from "@ant-design/icons";
import {
    PageContainer,
    ProConfigProvider,
    ProLayout,
} from "@ant-design/pro-components";
import {
    ConfigProvider,
    Dropdown,
} from "antd";
import routes from "../../routes";
import React, { useCallback, useEffect, useState } from "react";
import { getUserInfo } from "@/service/api";



export default () => {
    const [settings, setSetting] = useState({
        fixSiderbar: true,
        layout: "top",
        splitMenus: true,
    });

    const [pathname, setPathname] = useState("/list/sub-page/sub-sub-page1");
    const [num, setNum] = useState(40);
    if (typeof document === "undefined") {
        return <div />;
    }

    const getUserInfoHandle = useCallback(async () => {
        try{
            const res = await getUserInfo()
            console.log("res", res);
            if(!res.success){
                history.push("/login")
            }
        } catch(e) {
            history.push("/login")
        }
    }, [])

    useEffect(() => {
        getUserInfoHandle()
    }, [getUserInfoHandle])

    return (
        <div
            id="test-pro-layout"
            style={{
                height: "100vh",
                overflow: "auto",
            }}
        >
            <ProConfigProvider hashed={false}>
                <ConfigProvider
                    getTargetContainer={() => {
                        return (
                            document.getElementById("test-pro-layout") ||
                            document.body
                        );
                    }}
                >
                    <ProLayout
                        prefixCls="my-prefix"
                       
                        location={{
                            pathname,
                        }}
                        token={{
                            header: {
                                colorBgMenuItemSelected: "rgba(0,0,0,0.04)",
                            },
                        }}
                        siderMenuType="group"
                      
                        logo={() => null}
                        title={""}
                        avatarProps={{
                            src: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
                            size: "largest",
                            title: "任文浩",
                            render: (props, dom) => {
                                return (
                                    <Dropdown
                                        menu={{
                                            items: [
                                                {
                                                    key: "logout",
                                                    icon: <LogoutOutlined />,
                                                    label: "退出登录",
                                                },
                                            ],
                                        }}
                                    >
                                        {dom}
                                    </Dropdown>
                                );
                            },
                        }}
                       
                        headerTitleRender={(logo, title, _) => {
                            const defaultDom = (
                                <a>
                                    {logo}
                                    {title}
                                </a>
                            );
                            if (typeof window === "undefined")
                                return defaultDom;
                            if (document.body.clientWidth < 1400) {
                                return defaultDom;
                            }
                            if (_.isMobile) return defaultDom;
                            return (
                                <>
                                    {defaultDom}
                                </>
                            );
                        }}
                        menuFooterRender={(props) => {
                            if (props?.collapsed) return undefined;
                            return (
                                <div
                                    style={{
                                        textAlign: "center",
                                        paddingBlockStart: 12,
                                    }}
                                >
                                    <div>学习平台</div>
                                    <div>by rwh@1097481091@qq.com</div>
                                </div>
                            );
                        }}
                        
                        menuItemRender={(item, dom) => (
                            <div
                                onClick={() => {
                                    setPathname(item.path || "/welcome");
                                    history.push(item.path);
                                }}
                            >
                                {dom}
                            </div>
                        )}
                        {...settings}
                        route={{
                            path: "/",
                            routes: routes,
                        }}
                    >
                        <PageContainer
                            token={{
                                // paddingInlinePageContainerContent: num,
                            }}
                            extra={[
                                
                            ]}
                            subTitle="简单的描述"
                            
                        >
                            <Outlet />
                        </PageContainer>
                    </ProLayout>
                </ConfigProvider>
            </ProConfigProvider>
        </div>
    );
};
